<template>
  <div class="item" v-if='detail'>
    <img :src="detail.img" alt="">
    <div>
      <p>豆瓣评分：{{detail.score}}</p>
      <p>产地：{{detail.country}}</p>
      <p><span class="tag" v-for='(tag, index) in detail.tags.split(",")' :key='index'>{{tag}}</span></p>
      <p>{{detail.summary}}</p>
    </div>
    <div>{{msg}}</div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'

export default {
  computed: {
    // 1. 最原始的写法
    // msg () {
    //   return this.$store.state.detail.msg
    // },
    // 2. 使用映射函数，参数是对象
    // ...mapState({
    //   msg (state) {
    //     return state.detail.msg
    //   }
    // }),
    // 3. 使用映射函数，参数是数组
    ...mapState('detail', ['detail', 'msg'])
  },
  methods: {
    ...mapActions('detail', ['queryMovieDetail'])
  },
  created () {
    // 触发action
    // /detail?id=123
    // 获取上述参数 this.$route.query.id
    this.queryMovieDetail(this.$route.query.id)
    // 如果想手动触发模块中的action，那么需要添加模块的前缀
    // this.$store.dispatch('detail/queryMovieDetail', this.$route.query.id)
  }
}
</script>
